<template>
	<view class="coffee-item">
		<!-- 页面传值 通过query get传值 -->
		<navigator :url="`/pages/detail/detail?pid=${props.coffee.pid}`">
			<image :src="props.coffee.smallImg"></image>
		</navigator>
		<view class="name">
			{{props.coffee.name}}
		</view>
		<view class="enname">
			{{props.coffee.enname}}
		</view>
		<view class="price" @click="postprice(props.coffee)">
			{{props.coffee.price}}
		</view>
	</view>
</template>
<script setup>
	const props=defineProps({
			coffee:{
				type:Object,
				default:()=>({name:"",enname:"",price:""})
			},
			isRadius:{
				type:Boolean,
				default:true
			}
		});
	let postprice=(item)=>{
		// 触发组件监听的 postprice事件.
		uni.$emit("postprice",{price:item.price,pid:item.pid})
	}
	// export default {
	// 	name:"CoffeeItem",
	// 	props:{
	// 		coffee:{
	// 			type:Object,
	// 			default:()=>({name:"",enname:"",price:""})
	// 		},
	// 		isRadius:{
	// 			type:Boolean,
	// 			default:true
	// 		}
	// 	},
	// 	data() {
	// 		return {
				
	// 		};
	// 	}
	// }
</script>

<style lang="scss">
.coffee-item{
	width:280rpx;
	padding:20rpx;
	background-color: #fff;
	border-radius: 20rpx;
	font-size:32rpx;
	overflow: hidden;
	image{
		display: block;
		width:100%;
		height:280rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.name{
		color:black;
	}
	.enname{
		color:#ddd;
	}
	.price{
		font-weight: bold;
		color:red;
	}
}
</style>